@using Aspire.Dashboard.Resources
@typeparam T

<FluentKeyCode Only="@(new[] { KeyCode.Ctrl, KeyCode.Enter })" OnKeyDown="HandleKeyDown" class="keycapture">
    <span class="col-sort-container" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(Column))" @oncontextmenu:preventDefault>
        <FluentButton Disabled="@(!AnyColumnActionEnabled)" Id="@_columnId" Appearance="Appearance.Stealth" class="col-sort-button" @onclick="@HandleColumnHeaderClickedAsync" aria-label="@Tooltip" title="@Tooltip">
            <div class="col-title-text" title="@Tooltip">@Column.Title</div>

            @if (Grid.SortByAscending.HasValue && Column.ShowSortIcon)
            {
                if (Grid.SortByAscending == true)
                {
                    <FluentIcon Value="@(new Icons.Regular.Size16.ArrowSortUp())" Slot="@(Column.Align == Align.End ? "start" : "end")" Style="opacity: 0.5; margin-left: -5px;"/>
                }
                else
                {
                    <FluentIcon Value="@(new Icons.Regular.Size16.ArrowSortDown())" Slot="@(Column.Align == Align.End ? "start" : "end")" Style="opacity: 0.5; margin-left: -5px;"/>
                }
            }
            @if (Grid.ResizeType is not null && Column.ColumnOptions is not null)
            {
                @if (Column.Filtered.GetValueOrDefault())
                {
                    <FluentIcon Value="@(new Icons.Regular.Size16.Filter())" Slot="@(Column.Align == Align.End ? "start" : "end")" Style="opacity: 0.5; margin-left: -5px;"/>
                }
            }
        </FluentButton>

        <FluentMenu Anchor="@_columnId" @bind-Open="@_isMenuOpen">
            <FluentMenuItem OnClick="@(async () => await Grid.SortByColumnAsync(Column))">
               @GetSortOptionText()
            </FluentMenuItem>
            <FluentMenuItem OnClick="@(async () => await Grid.ShowColumnOptionsAsync(Column))">@Loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeButtonText)]</FluentMenuItem>
        </FluentMenu>
    </span>
</FluentKeyCode>
